<#include "../common/layout/__mainlayout.html">
    <#include "../common/__pagination.html">

        <#assign pageBreadCrumbs>
            <li class="active"><a href="#">系统管理</a></li>
            <li class="active">角色管理</li>
        </#assign>

        <#assign pageCss>
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/zTreeStyle/zTreeStyle.css" type="text/css">
        </#assign>

        <#assign pageJavascript>
            <script src="${ctx}/static/admin/assets/js/jquery.ztree.all-3.5.min.js"></script>
            <script type="text/javascript">
                $(document).ajaxStart($.blockUI()).ajaxStop($.unblockUI());
                $(document).ready(function () {
                    $('[data-rel=tooltip]').tooltip();

                    if (!ace.vars['touch']) {
                        $('.chosen-select').chosen({allow_single_deselect: true});
                    }

                    // 清除远程modal数据
                    $("#editModal").on("hidden.bs.modal", function () {
                        $(this).removeData("bs.modal");
                    });

                    // 删除按钮
                    $("a.delete").on(ace.click_event, function (e) {
                        var currentA = this;
                        e.preventDefault();
//                bootbox.setDefaults({locale:"zh_CN"});
                        bootbox.confirm({
                                    message: "确定删除该角色?",
                                    buttons: {
                                        confirm: {
                                            label: "确定",
                                            className: "btn-primary btn-sm"
                                        },
                                        cancel: {
                                            label: "取消",
                                            className: "btn-sm"
                                        }
                                    },
                                    callback: function (result) {
                                        if (result) {
                                            $.get($(currentA).attr("href"), { },function(data){
                                                if(data){
                                                    window.location.href=window.location.href;
                                                }
                                            });
                                        }
                                    }
                                }
                        );
                    });

                    // 权限树
                    var setting = {
                        view: {
                            dblClickExpand: true,
                            showIcon: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "id",
                                pIdKey: "pid",
                                rootPId: 0
                            }
                        },
                        check: {
                            enable: true,
                            chkStyle: "checkbox",
                            chkboxType: {"Y": "", "N": ""},
                            autoCheckTrigger: true
                        },
                        callback: {
                            onCheck: onCheckHandler
                        }
                    }


                    $("a.resc").click(function () {
                        $.get("${ctx}/role/getResourceTree.do?id=" + $(this).attr("data"), function (data) {
                            $.fn.zTree.init($("#rescTree"), setting, data.data);
                        });
                    });
                });
                //权限树 相关事件
                function onCheckHandler(event, treeId, treeNode) {
                    if (treeNode.checked) {
                        // 增加权限
                        $.post("${ctx}/role/addRoleResource.do", {"roleId": treeNode.roleId, "resId": treeNode.id});
                    }
                    else {
                        // 移除权限
                        $.post("${ctx}/role/deleteRoleResource.do", {"roleId": treeNode.roleId, "resId": treeNode.id});
                    }
                }


            </script>
        </#assign>

        <@mainlayout pageBreadCrumbs=pageBreadCrumbs pageCss=pageCss pageJavascript=pageJavascript
        currentMenu="systemFlag-roleFlag">
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <div class="widget-box widget-color-blue2">
                    <div class="widget-header widget-header-small">
                        <h5 class="widget-title lighter">角色列表</h5>

                        <div class="widget-toolbar">
                            <a href="${ctx}/role/view.do" data-rel="tooltip" title="添加" data-toggle="modal"
                               data-target="#editModal"> <i class="ace-icon fa fa-plus-circle green"></i></a>
                            <a href="#" data-action="collapse"> <i class="ace-icon fa fa-chevron-up"></i></a>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main no-padding">
                            <table id="roleTable" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th width="60">角色id</th>
                                    <th width="100">名称</th>
                                    <th width="80">更新时间</th>
                                    <th width="40">排序</th>
                                    <th width="100">备注</th>
                                    <th width="40">状态</th>
                                    <th width="60">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <#list roleList as role>
                                    <tr>
                                        <td>${role.id!}</td>
                                        <td>${role.name!}</td>
                                        <td>${role.updateTime?string("yyyy-MM-dd HH:mm:ss")!}</td>
                                        <td>${role.sort!}</td>
                                        <td>${role.remark!}</td>
                                        <td>
                                            <#if role.enable == 0>
                                                <div>启用</div>
                                                <#else>
                                                    <div style="color:red">停用</div>
                                            </#if>
                                        </td>
                                        <td>
                                            <div class="hidden-sm hidden-xs action-buttons">
                                                <a class="green tooltip-success edit" href="${ctx}/role/view.do?id=${role.id!}" data-rel="tooltip"  title="编辑" data-toggle="modal" data-target="#editModal"><span class="label label-success">编辑</span></a>
                                                <a class="orange tooltip-warning resc" href="${ctx}/role/viewPerm.do?id=${role.id!}"  data-rel="tooltip"  title="权限" data="${role.id!}" data-toggle="modal" data-target="#editModal"><span class="label label-warning">权限</span></a>
                                                <a class="red tooltip-error delete" href="${ctx}/role/delete.do?id=${role.id!}" data-rel="tooltip" title="删除"> <span class="label label-danger">删除</span></a>
                                            </div>


                                            <div class="hidden-md hidden-lg">
                                                <div class="inline position-relative">
                                                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">  <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                                                    </button>

                                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                        <li><a href="${ctx}/admin/role/view.do?id=${role.id!}"  class="tooltip-success edit" data-rel="tooltip"   title="编辑" data-toggle="modal" data-target="#editModal">  <span class="label label-success">编辑</span></a> </li>
                                                        <li><a href="${ctx}/role/viewPerm.do?id=${role.id!}" class="tooltip-warning resc" data-rel="tooltip" title="权限" data="${role.id!}" data-toggle="modal" data-target="#editModal"><span class="label label-warning">权限</span></a></li>
                                                        <li><a href="${ctx}/admin/role/delete.do?id=${role.id!}"  class="tooltip-error delete" data-rel="tooltip"  title="删除"> <span class="label label-danger">删除</span></a> </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </#list>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <!--编辑对话框-->
        <div id="editModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>
    </@mainlayout>